<template>
  <div>
    <div class="title">
      <p style="font-weight:600"><span>{{ currentYear }}年</span>出入口线路流量趋势图</p>
    </div>
    <div class="tab">
      <div class="theDate" @click="showPopupPicker = true">
        <div>{{ currentYear }}年</div>
        <div class="grayCrow"></div>
      </div>
      <div class="theDate" @click="showPopupPicker1 = true">
        <div>{{ columns1[tabIndex] }}</div>
        <div class="grayCrow"></div>
      </div>
      <div class="theDate" @click="showPopupPicker2 = true">
        <div>{{ columns2[tableIndex] }}</div>
        <div class="grayCrow"></div>
      </div>
    </div>
    <van-popup v-model="showPopupPicker" position="bottom">
      <van-picker title="请选择年份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPopupPicker = false"
        :visible-item-count="3" :default-index="currentYear - 2021" />
    </van-popup>
    <van-popup v-model="showPopupPicker1" position="bottom">
      <van-picker title="请选择出入口" show-toolbar :columns="columns1" @confirm="onConfirm1"
        @cancel="showPopupPicker1 = false" :visible-item-count="3" :default-index="0" />
    </van-popup>
    <van-popup v-model="showPopupPicker2" position="bottom">
      <van-picker title="请选择车型" show-toolbar :columns="columns2" @confirm="onConfirm2"
        @cancel="showPopupPicker2 = false" :visible-item-count="3" :default-index="0" />
    </van-popup>
    <detail-aweek :title="$route.query.title" :listInfo="listInfo" :qingfenLegend="qingfenLegend"></detail-aweek>
    <normal-table ref="normalTable" :listInfo='listInfo'></normal-table>
    <img v-if="showBackTop" class="backTop" src="~@/assets/feeManage/top.png" @click="backTop" alt="">
  </div>
</template>

<script>
import NormalTable from './component/normalTable'
import DetailAweek from "./component/detailAweek";
import { mapGetters } from 'vuex'
import scroll from '@/mixins/scroll'

export default {
  name: 'index1',
  data() {
    return {
      tabIndex: 0,
      tableIndex: 0,
      listInfo: [],
      showPopupPicker: false,
      showPopupPicker1: false,
      showPopupPicker2: false,
      currentYear: '',
      qingfenLegend: ["今年", "去年"],
      tabList: [],
      paths: [
        '/NewXLtraf/getQsXlTraf',
        '/NewPlaztraf/getQsPlazTraf',
      ],
    }
  },
  mixins: [scroll],
  components: {
    DetailAweek,
    NormalTable
  },
  computed: {
    columns() {
      const year = new Date().getFullYear()
      var yearList = []
      for (let i = 2021; i <= year; i++) {
        yearList.push(i)
      }
      return yearList
    },
    columns1() {
      return ['出入口', '入口', '出口']
    },
    columns2() {
      return ['全部车型', '货车', '客车']
    },
    ...mapGetters(['firstTabId', 'detailTime', 'detailTabIndex', 'detailTableIndex', 'timeObj'])
  },
  watch: {
    'detailTabIndex': 'updateData',
    detailTime: {
      handler() {
        this.$store.commit('SETDETAILTABINDEX', 9)
        this.$store.commit('SETDETAILTABLEINDEX', 9)
      },
      deep: true
    }
  },
  async mounted() {
    this.tabIndex = this.$route.query.tabIndex || 0;
    this.tableIndex = this.$route.query.tableIndex || 0;
    this.currentYear = this.timeObj.startData.split('-')[0];
    document.title = `${this.$route.query.title.indexOf('高速') > -1 ? this.$route.query.title : this.$route.query.title + '站'}`
    this.getInfo()
  },
  methods: {
    onConfirm(value, index) {
      this.showPopupPicker = false
      this.currentYear = value
      this.getInfo()
    },
    onConfirm1(value, index) {
      this.tabIndex = index;
      this.showPopupPicker1 = false
      this.getInfo()
    },
    onConfirm2(value, index) {
      this.tableIndex = index;
      this.showPopupPicker2 = false
      this.getInfo()
    },
    getInfo() {
      let value = this.currentYear;
      let nowYear = new Date().getFullYear();
      let list = nowYear == value ? ["今年", "去年"] : [value + '年', (value - 1) + '年'];
      this.$refs.normalTable.setHeader(list);
      this.qingfenLegend = list;

      const params = {
        subcno: this.$route.query.index == 2 ? this.$route.query.title + '站' : this.$route.query.title,
        edhm: this.currentYear + '0101',
        lanetype: parseInt(this.tabIndex) + 1,
        vehtype: parseInt(this.tableIndex) + 1
      }
      this.$vux.loading.show({
        text: "加载中..."
      });
      this.$Post(this.paths[this.$route.query.index - 1],
        params,
        ({ data }) => {
          this.listInfo = data
          this.$vux.loading.hide();
        },
        err => {
          this.$alertShow(err.message);
          this.$vux.loading.hide();
        },
        false
      )
    },
    updateData(fl = '') {
      this.PromiseAllData()
    },
    async PromiseAllData() {

      const result = await Promise.all([getInfo]).finally(() => {
        this.$vux.loading.hide();
      })
      this.tableDataList = result
      // 重置状态, 不重置状态会导致都点击出口时, 不触发监听
      this.$store.commit('SETDETAILTABINDEX', 0)
      this.$store.commit('SETDETAILTABLEINDEX', 0)
    },
    // 回到顶部
    backTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;

  p {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    height: 0.36rem;
    font-size: 0.36rem;
    // font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #333333;
    line-height: 0.36rem;

    span {
      color: #46AE65;
    }
  }
}

.tab {
  display: flex;
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  margin-bottom: 0.1rem;

  .theDate {

    padding: 0 .1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.2rem;
    margin-right: 0.3rem;
    min-width: 1.26rem;
    height: 0.6rem;
    background: #F7F7F7;
    border-radius: 0.12rem;
    border: 0.01rem solid #CBCBCB;
    font-size: 0.26rem;
    color: #666;

    div {
      font-family: PingFangSC-Regular, PingFang SC;
    }

    .grayCrow {
      margin-left: 0.08rem;
      width: 0;
      height: 0;
      border-right: 0.1rem solid transparent;
      border-left: 0.1rem solid transparent;
      border-top: 0.1rem solid #cccccc;
    }
  }

  .tab-item {
    margin: 0 0.28rem 0 0;
    width: 1.6rem;
    height: 0.54rem;
    background: #F3F4F5;
    border-radius: 0.08rem;
    font-size: 0.28rem;
    // font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      color: #4375C9;
      background: #EEF4FE;
      border: 0.02rem solid #4375C9;
    }
  }
}

.backTop {
  position: fixed;
  width: 0.72rem;
  height: 0.72rem;
  right: 0.3rem;
  bottom: 0.3rem;
}
</style>
